<template>
  <div class="page">
    <div class="left_side"></div>
    <div class="mid">
      <div class="fill"></div>
      <div class="top">
        <Menu mode="horizontal" active-name="blog" class="nav" @on-select="changeMenu">
          <div>
            <MenuItem class="item_left" name="blog" to="/index/blog">博文库</MenuItem>
            <MenuItem class="item_left" name="writeBlog" to="/index/write">写博客</MenuItem>
            <MenuItem class="item_left" name="bbs" to="/index/bbs_index">BBS论坛</MenuItem>
            <MenuItem class="item_left" name="dt" to="/index/dt">Flandre</MenuItem>
            <MenuItem class="item_left" name="im" to="/index/im">IM_Chat</MenuItem>
          </div>
          <div>
            <MenuItem class="item_right" name="mail">
              <Badge :count="5">
                <Icon type="md-mail" :size="icon_size"/>
              </Badge>
            </MenuItem>
            <MenuItem class="item_right" name="setting" to="/index/setting">
              <Icon type="md-settings" :size="icon_size"/>
            </MenuItem>
            <MenuItem name="user" to="/index/user">
              <Avatar size="large">User</Avatar>
            </MenuItem>
          </div>
        </Menu>
      </div>
      <div class="content">
        <router-view/>
      </div>
    </div>
    <div class="right_side"></div>
    <Drawer title="Basic Drawer" :width="25" placement="left" :closable="false" v-model="drawer">
      <Scroll :height="800" :on-reach-bottom="handleReachBottom">
        <Card dis-hover v-for="(item, index) in list1" :key="index" style="margin: 32px 0">
          Content {{ item }}
        </Card>
      </Scroll>
    </Drawer>
  </div>
</template>

<script>
  export default {
    name: "admin",
    data: () => ({
      icon_size: 24,
      drawer: false,
      list1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }),
    methods: {
      changeMenu(name) {
        name === 'mail' ? this.drawer = true : '';
      },
      handleReachBottom() {
        return new Promise(resolve => {
          setTimeout(() => {
            const last = this.list1[this.list1.length - 1];
            for (let i = 1; i < 11; i++) {
              this.list1.push(last + i);
            }
            resolve();
          }, 2000);
        });
      }
    }
  }
</script>

<style scoped>
  .top {
    width: 100%;
    margin: 20px auto;
  }

  .content {
    width: 100%;
    height: 89%;
  }

  .fill {
    width: 1px;
    height: 1px;
  }

  .page {
    width: 100%;
    height: 99vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .left_side {
    width: 20%;
    height: 100%;
    background-image: url("https://xuan-1256944348.cos.ap-beijing.myqcloud.com/img/left.jpg");
    background-size: cover;
  }

  .right_side {
    width: 20%;
    height: 100%;
    background-image: url("https://xuan-1256944348.cos.ap-beijing.myqcloud.com/img/right.jpg");
    background-size: cover;
  }

  .mid {
    width: 60%;
    height: 100%;
  }

  .nav {
    display: flex;
    justify-content: space-between;
  }

  .item_right {
    margin-left: 20px;
  }

  .item_left {
    margin-left: 20px;
  }
</style>
